<template>
    <!-- banner -->
    <div class="bg-custom-banner">
        <div class="container mx-auto">
        <img class="mx-auto" src="@/static/img/slide1.png" />
        </div>
    </div>
    <div class="container px-4 mx-auto mt-6">
        <div class="text-center">
        <p class="text-custom-blueTitle text-2xl font-bold">「为什么选择瓢城企业培训」</p>
        <p class="text-gray-400 text-lg mt-4">强大的师资力量，完美的实战型管理课程，让您的企业实现质的腾飞！</p>
        </div>
        <!-- tab -->
        <div class="mt-6">
        <div class="grid-cols-1 md:grid-cols-2 grid gap-20">
            <div class="flex mx-auto mt-6 items-center">
            <img src="@/static/img/tab1-1.png" class="max-h-24" alt="" />
            <div class="ml-6">
                <p class="text-2xl font-bold">课程内容</p>
                <p class="line-through mb-2 mt-2">其他：高校不知名的讲师编号，没有任何实战价值的教材</p>
                <p>我们：知名企业家、管理学大师联合编写的具有实现性教材</p>
            </div>
            </div>
            <div class="flex mx-auto mt-6 items-center">
            <img src="@/static/img/tab1-2.png" class="max-h-24" alt="" />
            <div class="ml-6">
                <p class="text-2xl font-bold">课程内容</p>
                <p class="line-through mb-2 mt-2">其他：高校不知名的讲师编号，没有任何实战价值的教材</p>
                <p>我们：知名企业家、管理学大师联合编写的具有实现性教材</p>
            </div>
            </div>
            <div class="flex mx-auto mt-6 items-center">
            <img src="@/static/img/tab1-3.png" class="max-h-24" alt="" />
            <div class="ml-6">
                <p class="text-2xl font-bold">课程内容</p>
                <p class="line-through mb-2 mt-2">其他：高校不知名的讲师编号，没有任何实战价值的教材</p>
                <p>我们：知名企业家、管理学大师联合编写的具有实现性教材</p>
            </div>
            </div>
            <div class="flex mx-auto mt-6 items-center">
            <img src="@/static/img/tab1-4.png" class="max-h-24" alt="" />
            <div class="ml-6">
                <p class="text-2xl font-bold">课程内容</p>
                <p class="line-through mb-2 mt-2">其他：高校不知名的讲师编号，没有任何实战价值的教材</p>
                <p>我们：知名企业家、管理学大师联合编写的具有实现性教材</p>
            </div>
            </div>
        </div>
        </div>
    </div>
    <!-- tab2 -->
    <div class="bg-gray-200">
        <div class="container mx-auto mt-6">
        <div class="py-12">
            <div class="grid-cols-1 md:grid-cols-2 grid gap-20">
                
            <div class="mx-auto w-full text-center flex flex-col justify-center">
                <p class="text-2xl font-bold">强大的学习体系</p>
                <p class="text-lg mt-4">经过管理学大师层层把关，让您的企业突飞猛进。</p>
            </div>
            <div class=" md:row-start-auto row-start-1  mx-auto w-full flex justify-center">
                <img class="w-2/5" src="@/static/img/tab2.png" alt="" />
            </div>
            </div>
        </div>
        </div>
    </div>
    <div>
        <div class="container mx-auto mt-6">
        <div class="py-20">
            <div class="grid-cols-1 md:grid-cols-2 grid gap-20">
            <div class="mx-auto w-full flex justify-center">
                <img class="w-4/6" src="@/static/img/tab3.png" alt="" />
            </div>
            <div class="mx-auto w-full text-center flex flex-col justify-center">
                <p class="text-2xl font-bold">完美的管理方式</p>
                <p class="text-lg mt-4">最新的管理培训方案，让您的企业赶超同行</p>
            </div>
            </div>
        </div>
        </div>
   
    </div>
</template>
<script lang="ts" setup></script>

<style scoped></style>
